<template>
  <div class="outside">
      <div class="top">
          <div class="topContent">
            <div class="icon">
              <el-image :src="src"></el-image>
            </div>
          </div>
          <div class="menu">
            <div class="myButton">
              <div class="a">
                <el-link href="" target="_blank">HOME</el-link>
              </div>
              <div class="a">
                  <el-link href="" target="_blank">ABOUT</el-link>
              </div>
              <div class="a">
                <el-link href="" target="_blank">BLOG</el-link>
              </div>
              <div class="a">
                <el-link href="" target="_blank">PAGE</el-link>
              </div>
              <div class="a">
                <el-link href="" target="_blank">CONTACT</el-link>
              </div>
              <div class="a">
                <el-link href="" target="_blank">SERVERS</el-link>
              </div>
            </div>
          </div>
      </div>
      <div>
          <el-carousel interval="5000" arrow="always" height="500px">
            <el-carousel-item v-for="item in 4" :key="item">
            <h3>
                Education for everyone
            </h3>
            <p>欢迎来到青海民族大学图书馆</p>
            </el-carousel-item>
        </el-carousel>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      src: require('../assets/education-logo.png')
    }
  }
}
</script>

<style lang="less" scoped>
    .outside{
        height: 100%;
        .top{
            background-color: #fff;
            padding: 20px 90px;
            display: flex;
            justify-content : space-between;
            .topContent {
                width: 70%;
                display: flex;
                // align-items: center;
                // flex-direction:row;
                .icon{
                width: 200px;
                }
            }
            .menu {
                display: flex;
                flex-direction: row;
                .myButton {
                    display: inline-block;
                    flex-direction: row;
                    display: flex;
                    .a {
                        font-size: 20px;
                        font-weight: 600;
                        text-transform: uppercase;
                        word-spacing: 30px;
                        padding: 0px 13px;
                    }
                }
            }
        }
        .el-carousel__item h3{
            color:black;
            font-size: 70px;
            opacity: 1;
            line-height: 250px;
            margin: 0;
            text-align: center;
        }
        p{
            font-size: 40px;
            color: black;
            text-align: center;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-image: url('../assets/2.jpg');
            background-size: 100% 100%;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-image: url('../assets/3.jpg');
            background-size: 100% 100%;
        }
    }
</style>
